<template>
  <div style="position: absolute;top:0">
    <template v-for="(tip,index) in tips">
      <div class="menu-tip " v-if="currIndex===index"  :style="tip.style" :key="index" >
        <menu-tip-content @close="doMyClose"   @next="goNext" :message="tip.message" :style="{position: 'absolute',top:'-10px',left:tip.style.width,marginLeft:'20px'} "/>
      </div>
    </template>
    <div class="header-tip" v-if="currIndex===tips.length" :style="headerStyle">
      <header-tip-content @close="doMyClose"  @next="goNext" style="position:absolute;right:90%" />
    </div>
  </div>
</template>
<script>
import Popup from 'element-ui/src/utils/popup';
import MenuTipContent from "@/components/help-tip/menu-tip-content.vue";
import HeaderTipContent from "@/components/help-tip/header-tip-content.vue";
import constants from "@/util/constants";
export default {
  name: "help-tip",
  components: { HeaderTipContent, MenuTipContent},
  props:{
    modal: {
      type: Boolean,
      default: true,
    },
  },
  mixins:[Popup],
  data(){
    return {
      tips:[],
      currIndex:10000,
      headerStyle:{},
      headHelpTipDom:'',
    }
  },
  methods:{
    createMenuDivTip(parent,message,dom){
      const info = parent.getBoundingClientRect()
      const bl = this.$scale()
      this.tips.push({
        style:{
          top : `${info.top/bl}px`,
          height : `${info.height/bl}px`,
          width : `${this.$store.getters.menuWidth}px`,
        },
        dom,
        message
      })
    },
    createHeaderDivTip(dom){
      this.headHelpTipDom = dom
      const info = dom.getBoundingClientRect()
      const bl = this.$scale()
      this.headerStyle = {
        top : `${info.top/bl}px`,
        left: `${info.left/bl}px`,
        height : `${info.height/bl}px`,
        width : `${info.width/bl}px`,
      }
    },
    clearAllHelpClass(){
      this.tips.forEach(tip=>this.$removeClass(tip.dom,'menu-show-help'))
      this.headHelpTipDom && this.$removeClass(this.headHelpTipDom,'header-show-help')
    },
    goNext(){
      this.currIndex++
      this.clearAllHelpClass()
      if(this.currIndex<this.tips.length){
        this.$addClass(this.tips[this.currIndex].dom,'menu-show-help')
      }else if(this.currIndex===this.tips.length){
        this.$addClass(this.headHelpTipDom,'header-show-help')
      }else{
        this.doMyClose()
      }
    },
    doMyClose(){
      this.currIndex = 10000
      this.$store.commit('SET_IS_SHOWING_HELP',false)
      this.close()
    },
    doMyOpen(){
      this.$store.commit('SET_IS_SHOWING_HELP',true)
      this.$nextTick(_=>{
        this.initMenuTip()
        this.currIndex = -1
        this.goNext();
        this.open()
      })
    },
    initMenuTip() {
      this.tips.splice(0)
      Array.from(document.querySelectorAll(".menu-show-help"), dom => this.createMenuDivTip(dom.parentNode, JSON.parse(dom.getAttribute("message")), dom));
      Array.from(document.querySelectorAll(".header-show-help"), dom => this.createHeaderDivTip(dom));
    }
  },
};
</script>

<style scoped>
.menu-tip {
  position: absolute;
  background: #d4e0fe;
  border: #FFFFFF solid 4px;
  border-radius: 4px;
}

.header-tip{
  position: absolute;
  background: #FFFFFF;
  border-radius: 4px;
}
</style>
